function Snake(ele){
    //保存地图对象
    this.ele=ele
    //蛇节长度
    this.len=20
    //存蛇
    this.snakeObj=[
        {x:3,y:2,color:'red',ele:null},
        {x:2,y:2,color:'blue',ele:null},
        {x:1,y:2,color:'blue',ele:null}
    ]
    this.direction='right'
}

Snake.prototype.remove=function(){
    for(let i=0;i<this.snakeObj.length;i++){
        //单独保存蛇节对象
        if(this.snakeObj[i].ele){
            this.ele.removeChild(this.snakeObj[i].ele)
        }
    }
}

Snake.prototype.create=function(){
    //从地图上清除蛇
    this.remove()
    //循环遍历创建蛇
    for(let i=0;i<this.snakeObj.length;i++){
        //1.创建蛇标签对象
        let divObj=document.createElement('div')
        //2.设置宽高 坐标 颜色
        divObj.style.width=this.len+'px'
        divObj.style.height=this.len+'px'
        divObj.style.position='absolute'
        divObj.style.left=this.snakeObj[i].x*this.len+'px'
        divObj.style.top=this.snakeObj[i].y*this.len+'px'
        divObj.style.background=this.snakeObj[i].color
        //单独保存蛇节对象
        this.snakeObj[i].ele=divObj
        //3.放到页面展示
        this.ele.appendChild(divObj)
    }
}

Snake.prototype.move=function(){
    // for(let i=0;i<this.snakeObj.length;i++){
    //     this.snakeObj[i].x+=1
    // }
    for(let i=this.snakeObj.length-1;i>0;i--){
        this.snakeObj[i].x=this.snakeObj[i-1].x
        this.snakeObj[i].y=this.snakeObj[i-1].y
    }
    switch(this.direction){
        case 'top':
            this.snakeObj[0].y-=1
            break;
        case 'bottom':
            this.snakeObj[0].y+=1
            break;
        case 'left':
            this.snakeObj[0].x-=1
            break;
        case 'right':
            this.snakeObj[0].x+=1
            break;
    }
    //重新创建
    this.create()
}